<template>
  <div class="kefuzhongxin">
    <head_><h1>客服中心</h1></head_>
    <div class="kefu_imge">
      <div class="kfimg_div">
        <h1>Hello，{{this.$store.state.user.clientName}}</h1>
        <p>你的专属客服，琦奇</p>
      </div>
      <img class="_img" src="./../../assets/dingdanxinxi/zhongxin.png" alt="" />
    </div>
    <ul class="_ul">
      <li @click="toguize('新手上路')"><span>新手上路</span><van-icon size=".4rem" name="arrow" /></li>
      <li @click="toguize('常见问题')"><span>常见问题</span><van-icon size=".4rem" name="arrow" /></li>
      <li @click="toguize('服务规则')"><span>服务规则</span><van-icon size=".4rem" name="arrow" /></li>
    </ul>
  </div>
</template>

<script>
import head_ from "./header";
export default {
  props: {},
  data() {
    return {};
  },
  methods: {
    toguize(value){
      this.$router.push(`/fuwuguize/${value}`)
    }
  },
  components: {
    head_,
  },
};
</script>

<style scoped lang="less">
.kefuzhongxin {
  width: 100%;
  font-size: 0;
  .kefu_imge {
    width: 100%;
    height: 2.18rem;
    position: relative;
    bottom: 0;
    .kfimg_div {
      width: 95%;
      height: 1.72rem;
      border-radius: 0.16rem;
      background: linear-gradient(to right, #5490ff 0%, #363fff 100%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: .26rem;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      h1 {
        font-size: 0.31rem;
        color: white;
        margin-bottom: .1rem;
        font-weight: 600;
      }
      p {
        margin-top: .1rem;
        width: 2.96rem;
        height: 0.41rem;
        color: white;
        border-radius: 0.1rem;
        font-size: 0.25rem;
        padding-left: .43rem;
        line-height: .41rem;
        background: linear-gradient(
          to right,
          rgba(255, 255, 255, 0.4) 0%,
          rgba(255, 255, 255, 0.05) 100%
        );
      }
    }
    ._img {
      height: 2.18rem;
      position: absolute;
      right: 0.5rem;
      top: 0.02rem;
    }
  }
  ._ul {
    width: 100%;
    height: 3rem;
    display: flex;
    flex-direction: column;
    li {
      flex: 1;
      border-bottom: 0.01rem solid #e0e0e0;
      box-sizing: border-box;
      font-size: 0.27rem;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.24rem;
    }
  }
}
</style>
